<!-- 
 * @description: 
 * @fileName: NeighbourB.vue 
 * @author: nsl 
 * @date: 2025-04-29 09:29:30
 * @version: V1.0.0 
!-->
<template>
    <div>
        <div>--------------- in NeighbourB begin --------------</div>
        props.neighbourAcompRef.filterRef={{props.neighbourAcompRef?.filterRef}}
        <br>
        computedFiltered={{ computedFiltered }}
        <br>
        <br>
        props.fatherRef={{ props.fatherRef }}
        <br>
        <br>
        computedCount={{ computedCount }}
        <br>
        <br>
        computedResult={{ computedResult }}
        <br>
        <button @click="increase"> countRef ++</button>
        <br>
        <br>
        countRef={{ countRef }}
        <div>--------------- in NeighbourB end --------------</div>
    </div>
</template>
<script setup lang='ts'>
import {onMounted,computed,ref,watchEffect,isRef,isReactive} from 'vue'
const props = defineProps({
    neighbourAcompRef:{type:Object},
    fatherRef:{type:Object}
});

// 方式2：运行时声明（JavaScript）
// const props = defineProps({
//   title: { type: String, required: true },
//   count: { type: Number, default: 0 },
//   disabled: { type: Boolean, default: false }
// });


let i=10;
const countRef=ref(0);

function increase(){
    countRef.value++;
}
console.log('props.fatherRef',props.fatherRef);
console.log('isRef(props.fatherRef),isReactive(props.fatherRef) ',isRef(props.fatherRef),isReactive(props.fatherRef));//false


console.log('props.fatherRef.count',props.fatherRef.count);
console.log('isRef(props.fatherRef.count)) ',isRef(props.fatherRef.count),isReactive(props.fatherRef.count));//false

const computedCount=computed(()=>{
    // return countRef.value+1;
    console.log('in computedCount');
    countRef
    return i++;
})

const computedResult=computed(()=>{
    console.log('in computedResult');
    props.fatherRef // 不触发 computed
    // props.fatherRef.count // 触发 computed
    const result=countRef.value+1;
    return result
})

let computedFiltered;
computedFiltered=computed(()=>{
    let result={};
    if(props.neighbourAcompRef){
        console.log(' in computedFiltered props.neighbourAcompRef',props.neighbourAcompRef);
        console.log(' in computedFiltered props.neighbourAcompRef.filterRef',props.neighbourAcompRef.filterRef);
        // console.log(' in computedFiltered props.neighbourAcompRef.filterRef',JSON.stringify(props.neighbourAcompRef.filterRef));
        // console.log(' in computedFiltered props.neighbourAcompRef.filterRef.name',props.neighbourAcompRef.filterRef?.name);
        // props.neighbourAcompRef.filterRef.value['addx']='123';
        // const result={...(props.neighbourAcompRef.filterRef.value)}
        //  result={name:props.neighbourAcompRef.filterRef.name};
    }
    
    // result.name=props.neighbourAcompRef.filterRef.value.name;
    // result.count=countRef.value;
    result={...props.neighbourAcompRef.filterRef}
    return result
})


    
onMounted(()=>{
    console.log('in Nb onMounted begin');
    // console.log('props.neighbourAcompRef =',props.neighbourAcompRef);
    
    console.log('in Nb onMounted end');
});



watchEffect(()=>{
    // console.log(' in computedFiltered props.neighbourAcompRef',props.neighbourAcompRef);
    // console.log(' in computedFiltered props.neighbourAcompRef.filterRef',props.neighbourAcompRef.filterRef);
    // props.neighbourAcompRef.filterRef.value['addx']='123';
    // const result={...(props.neighbourAcompRef.filterRef.value)}
    console.log(' in computedFiltered props.neighbourAcompRef.filterRef',props.neighbourAcompRef?.filterRef);
    console.log('in watchEffect');
    
    const result={};
    // result.name=props.neighbourAcompRef.filterRef.value.name;
    result.count=countRef.value;
})
// setTimeout(() => {
//     console.log('in Nb setTimeout begin');
//     console.log('props.neighbourAcompRef =',props.neighbourAcompRef);
//     console.log('in Nb setTimeout end');
// }, 1500);

// setTimeout(()=>{
//     computedFiltered=computed(()=>{
//     countRef
//     console.log(' in computedFiltered props.neighbourAcompRef',props.neighbourAcompRef);
//     console.log(' in computedFiltered props.neighbourAcompRef.filterRef',props.neighbourAcompRef.filterRef);
//     props.neighbourAcompRef.filterRef.value['addx']='123';
//     // const result={...(props.neighbourAcompRef.filterRef.value)}
//     // const result={...countRef.value}//不触发 computed;
//     const result=countRef.value+1;
//     return result
// });
// },1200)
</script>
<style lang='scss' scoped>
    
</style>